<template>
  <div>
    <el-dialog
      v-model="dialogFormVisible"
      width="960px"
      top="5vh"
      title="绘制检测区域"
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">绘制检测区域</h4>
        </div>
      </template>
      <div>
        <canvas width="940" height="500" ref="mycanvas" @click="fn1" />
      </div>
      <div style="display: flex; width: 940px; height: 200px; margin-top: 10px">
        <div style="width: 40%">
          <div>操作说明：</div>
          <div style="margin-top: 5px">
            1.开始绘制：将鼠标移入画面中，点击鼠标左键开始绘制。
          </div>
          <div style="margin-top: 5px">
            2.完成绘制：点击鼠标右键，完成绘制。
          </div>
          <div style="margin-top: 5px">
            3.多区域绘制：完成绘制后，可点击鼠标左键继续绘制更多区域。
          </div>
          <div style="margin-top: 5px">备注：检测区域需要至少三个坐标点。</div>
        </div>
        <div style="width: calc(60% - 15px); margin-left: 15px">
          <el-table
            :data="tableData"
            border
            empty-text=" "
            style="width: 100%; height: 100%"
          >
            <el-table-column prop="alias" label="名称" />
            <el-table-column prop="alias" label="区域人员超员" />
            <el-table-column prop="record" label="操作">
              <template #default="{ row }">
                <div class="flex" style="justify-content: space-around">
                  <div class="btn" style="background: #409eff" @click="fn(row)">
                    编辑
                  </div>
                  <div class="btn" style="background: #f56c6c">删除</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div style="display: flex; justify-content: space-between; width: 940px">
        <div />
        <div style="margin-top: 10px">
          <el-button plain>关闭</el-button>
          <el-button type="primary">保存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
const dialogFormVisible = ref<any>(true);
const tableData = ref<any>([{}]);
const mycanvas = ref<HTMLCanvasElement | null>(null);

const fn1 = () => {
  console.log(mycanvas.value);
};
onMounted(() => {
  setTimeout(() => {
    initialize();
  }, 1);
});

const initialize = () => {
  const ctx = mycanvas.value.getContext("2d");
  const img = new Image();
  img.src = "/img/xFC9FFD43CBBD.jpg";
  img.onload = () => {
    const scaleX = Math.min(mycanvas.value.width / img.width);
    const scaleY = Math.min(mycanvas.value.height / img.height);
    ctx.clearRect(0, 0, mycanvas.value.width, mycanvas.value.height);
    ctx.drawImage(img, 0, 0, img.width * scaleX, img.height * scaleY);
  };
};

const fn = row => {
  console.log(row);
};
</script>
<style scoped lang="scss">
::v-deep .el-dialog__header {
  padding: 20px 10px 5px;
}

::v-deep .el-dialog__body {
  padding: 10px 10px 15px;
}

::v-deep .el-table thead th {
  text-align: center;
}

::v-deep .el-table tbody td {
  text-align: center;
}

.btn {
  width: 60px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
}
</style>
